<template>
  <div class="cart-wrap">
    <w-bread-nav title="购物车"></w-bread-nav>
    <!-- 没有商品的样式 -->
    <div class="m-null-data app-container" v-if="!allCartData.storeGoodsCartList || allCartData.storeGoodsCartList.length < 1"></div>
    <!-- 有商品的样式 -->
    <section class="app-container cart-body" v-else>
      <!-- 头部 -->
      <div class="text-m">
        全部商品<span style="margin-left: 5px;">{{cartCount}}</span>
      </div>
      <!-- 主体内容 -->
      <div class="section" v-for="(store, index) in allCartData.storeGoodsCartList" :key="index">

        <!-- 商家信息 -->
        <div class="hd">
          <w-checkbox v-model="store.checkStore" :label="store.storeId" @input="emitCheckStore(store)"></w-checkbox>
          <router-link :to="`/shop/${store.storeId}`" class="name">{{store.storeName}}</router-link>
          <!-- <w-button-ghost type="main contant-store" @click.native="onContactShop(store.storeId, store.goodsCartList[0].goodsId)">联系店家</w-button-ghost> -->
        </div>

        <!-- 商品列表 -->
        <div class="bd clearfix" v-for="(goodcart, goodIndex) in store.goodsCartList" :key="goodIndex" :class="{checked: store.checkStore || goodcart.checkGoods}">
          <!-- 商品信息 -->
          <div class="fl goods">
            <w-checkbox v-model="goodcart.checkGoods" :label="`good${goodcart.goodsId}`" @input="emitCheckGoodCart(store, goodcart)"></w-checkbox>
            <router-link :to="`/goods/detail/${goodcart.goodsId}`" class="avatar">
              <img class="minimg" v-lazy="goodcart.goodsPhotoPath">
            </router-link>
            <router-link :to="`/goods/detail/${goodcart.goodsId}`" class="tit">{{goodcart.goodsName + " " + goodcart.goodsSerial}}
            <br>
            <span class="goods-type" v-if="goodcart.goodsType == 1">伙拼</span></router-link>
          </div>

          <!-- 数量 -->
          <div class="fl num">
            <w-checkbox-group v-model="goodcart.checkAllGsp" @input="emitCheckGsp(store, goodcart)">
              <ul>
                <!-- 每个规格 -->
                <li v-for="(color, colorIndex) in goodsGspShow(goodcart)" :key="colorIndex">
                  <div v-for="(goodgsp, gspIndex) in color.list" :key="gspIndex">
                    <!-- 颜色 -->
                    <div class="rule">
                      <div style="margin-bottom: 20px" v-if="!gspIndex">
                        <span>颜色：</span>
                        <span class="color">{{color.name}}</span>
                      </div>
                      <div>
                        <span v-if="!gspIndex">尺码：</span>
                        <span class="empty-str" v-else></span>
                        <w-checkbox-item :label="`gsp${goodgsp.goodsCartId}`" :result="goodgsp"></w-checkbox-item>
                        <span>{{goodgsp.specSize | sizeColorSplit}}</span>
                      </div>
                    </div>
                    <!-- 
                      goodsNumType为0 则是期货，1为现货，期货则没有上限，现货则有上限
                      color.list.length改为goodsGspCount(goodcart)
                     -->
                    <div class="cart-input">
                      <w-input-number v-if="goodcart.goodsNumType == 0" v-model="goodgsp.count" :minNum="goodcart.goodsLimit < goodsGspCount(goodcart) ? 1 : goodcart.goodsLimit" :maxNum="1000000" @input="onChangeNum(goodgsp, goodcart)"></w-input-number>
                      <w-input-number v-else v-model="goodgsp.count" :minNum="goodcart.goodsLimit < goodsGspCount(goodcart) ? 1 : goodcart.goodsLimit" :maxNum="goodgsp.specpropertyInventCount" @input="onChangeNum(goodgsp, goodcart)"></w-input-number>                    
                    </div>
                    <!-- 结算是，超过最大库存则提示 -->
                    <span class="max-error" v-if="goodgsp.maxstore">最大库存{{goodgsp.specpropertyInventCount > 0 ? goodgsp.specpropertyInventCount : 0}}件</span>
                  </div>
                </li>
              </ul>
            </w-checkbox-group>
          </div>

          <!-- 单价 -->
          <div class="fl price">
            <p v-for="(tierd, index) in JSON.parse(goodcart.tierdPrice)" 
              :key="index" 
              :class="{cur: index == goodcart.curPriceIndex}">
              <!-- {{tierd.count}}件: ￥{{tierd.price | currency}} -->
              {{treidCount(tierd.count, index) }}￥{{tierd.price | currency}}
            </p>
          </div>

          <!-- 金额 -->
          <div class="fl money">
            <p style="font-weight: bold; font-size: 14px">{{getGoodsGspTotalPrice(goodcart.goodsGspList)}}</p>
            <!-- <p v-for="(goodmoney, moneyIndex) in goodcart.goodsGspList" :key="moneyIndex" >￥{{goodmoney.price | currency}}</p> -->
          </div>

          <!-- 操作 -->
          <div class="fl opreate">
            <span class="opreate-btn" @click="onCollect(goodcart)" v-text="getCollectStr(goodcart.goodsWhetherCollect)"></span>
            <span class="opreate-btn" @click="onDelete(goodcart)">删除</span>
            <!-- <i class="ico-collect" :class="{selected: goodcart.goodsWhetherCollect == 1}" @click="onCollect(goodcart)"></i>
            <i class="ico-del" @click="onDelete(goodcart)"></i> -->
          </div>
        </div>
      </div>

      <!-- 操作 -->
      <div class="cart-foot clearfix">
        <div class="fl cart-p">
          <div class="fl">
            <div class="check-all">
              <w-checkbox v-model="allCartData.checkAll" label="checkAll" @input="emitCheckAll"></w-checkbox>
            </div>
            <span style="margin-left: 12px;">全选</span>
            <span class="del" @click="onDeleteAll">删除</span>
          </div>
          <div class="fr">
            <div class="fl count">已选商品<span class="txt-count">{{totalCount}}</span>件</div>
            <div class="fr">合计（不含运费）：
              <span class="txt-count">￥{{totalPrice | currency}}</span>
            </div>
          </div>
        </div>
        <div class="fr">
          <w-button :type="totalCount > 0 ? 'main' : 'disabled'" class="fr" @click.native="onBalanceStatus">结算</w-button>
        </div>
      </div>
      <!-- <div class="cart-foot clearfix">
        <w-checkbox v-model="allCartData.checkAll" label="checkAll" @input="emitCheckAll"></w-checkbox>
        <span style="margin-left: 12px;">全选</span>
        <span class="del" @click="onDeleteAll">删除</span>
        <span class="count">已选商品<span class="txt-count">{{totalCount}}</span>件</span>
        <w-button :type="isSubmitOrder" class="fr" @click.native="onBalanceStatus">结算</w-button>
        <span class="fr">合计（不含运费）：
          <span class="txt-count">{{totalPrice | currency}}</span>
        </span>
      </div> -->
    </section>
  </div>
</template>

<script>
  import { apiCartAll, apiCartCount, apiDeleteCartGood, apiFavoriteGoods, apiBalanceStatus } from 'js/api'
  import { mapGetters, mapActions } from 'vuex'

  export default {
    data() {
      return {
        allCartData: {}, // 购物车全部数据
        totalCount: 0, // 总数量
        totalPrice: 0, // 总额
        isSubmitOrder: 'disabled', // 是否可以提交订单
        treidLength: 0,
        minCount: 0,
        chooseType: true
      }
    },
    created() {
      // 获取总数量
      this.fetchCartCount(this.token)
      // 购物车全部商品
      this.fetchCartAll(this.token)
    },
    computed: {
      ...mapGetters(['token', 'cartCount'])
    },
    methods: {
      ...mapActions(['fetchCartCount']),
      /**
       * 展示用的商品sku属性
       *
       * @param { Object } goods 商品
       */
      goodsGspShow(goods) {
        let gspList = []
        goods.pcSkuLists.forEach(sku => {
          let item = {
            name: sku.value,
            list: []
          }
          sku.sizeCountList.forEach(size => {
            goods.goodsGspList.forEach(gsp => {
              if (gsp.cartGsp == size.cartGsp) {
                item.list.push(gsp)
              }
            })
          })
          gspList.push(item)
        })
        return gspList
      },
      /**
       * 累加计算所有sku的count
       */
      goodsGspCount(goods) {
        let count = 0
        goods.goodsGspList.forEach(sku => {
          count += sku.count
        })
        return count
      },
      // 修改起订量格式
      treidCount(count, index) {
        // 如果小于起订量
        if (index < this.treidLength - 1) {
          return `${count}件`
        }
        return `${count.split('-')[0] || 0}件以上`
      },
      /**
       * 获取当前商品的总价格
       *
       * @param { Array } list 总数据
       */
      getGoodsGspTotalPrice(list) {
        // 总价格
        let totalPrice = 0

        // 遍历数据，累加总价格
        list.forEach(v => {
          totalPrice += Number(v.price)
        })
        return `￥${totalPrice.toFixed(2)}`
      },
      /**
       * 当前颜色是否是第一个，如果是，则展示颜色文字和尺码文字
       *
       * @param { Array }   list  当前查询的数组
       * @param { Integer } index 当前索引
       */
      isFirstColor(list, index) {
        let colorIndex = 0
        // 将颜色筛选后放到list列表中
        let filterList = list.filter((v, index1) => {
          if (v.specColor == list[index].specColor) {
            colorIndex++
          }
          return v.specColor == list[index].specColor
        })
        // 如果值查询出来一条数据（只有一个颜色和尺码），或者是第一个
        if (filterList.length == 1 || index == 0 || colorIndex == 1) {
          return true
        }
        return false
      },
      /**
       * 获取收藏状态
       */
      getCollectStr(goodsWhetherCollect) {
        if (goodsWhetherCollect == 1) {
          return '已收藏'
        }
        return '收藏'
      },
      // 获取全部商品
      fetchCartAll(token) {
        apiCartAll(token).then(data => {
          const res = data || {}
          res.checkAll = false
          if (res.storeGoodsCartList && res.storeGoodsCartList.length) {
            res.storeGoodsCartList.forEach(item => {
              item.checkStore = false
              item.goodsCartList = item.goodsCartList || []
              item.goodsCartList.forEach(goods => {
                goods.checkGoods = false
                goods.checkAllGsp = []
                this._calcuPriceByChangeGspNumber(goods)
                goods.goodsGspList = goods.goodsGspList || []
                goods.goodsGspList.forEach(gsp => {
                  gsp.maxstore = false
                })
              })
            })
          }
          this.allCartData = res
        })
      },
      // 收藏商品
      onCollect(good) {
        // if (good.checkGoods) {
        apiFavoriteGoods(this.token, good.goodsId.toString(), '1').then(data => {
          if (good.goodsWhetherCollect == 0) {
            this.$toast('收藏成功')
            good.goodsWhetherCollect = 1
          } else {
            this.$toast('已取消收藏')
            good.goodsWhetherCollect = 0
          }
        })
        // }
      },
      // 单个删除
      onDelete(good) {
        let aDel = []
        const _this = this
        if (good.checkAllGsp.length) {
          good.checkAllGsp.forEach(gsp => {
            aDel.push(gsp.goodsCartId)
          })
          this.$modal({
            content: '您确认删除该商品吗',
            onConfirm() {
              apiDeleteCartGood(_this.token, [], aDel, []).then(data => {
                _this.$toast('删除成功', () => {
                  good.checkAllGsp = []
                  _this.fetchCartAll(_this.token)
                  _this._calcuTotalCount()
                  _this._calcuTotalPrice()
                  _this.fetchCartCount(_this.token)
                  _this.isSubmitOrder = 'disabled'
                  _this._calcuPriceByChangeGspNumber(good)
                })
              })
            }
          })
        } else {
          this.$toast('请先勾选商品')
        }
      },
      // 删除全部购物车
      onDeleteAll() {
        const _this = this
        // 先统计选中的商品，如果选中则可以进行删除
        const aDel = []
        const aStore = this.allCartData.storeGoodsCartList || []
        aStore.forEach(store => {
          const aGoods = store.goodsCartList || []
          aGoods.forEach(good => {
            good.checkAllGsp.forEach(gsp => {
              aDel.push(gsp.goodsCartId)
            })
          })
        })
        // 如果不为空，则去删除
        if (aDel.length) {
          this.$modal({
            content: '您确认删除该商品吗',
            onConfirm() {
              apiDeleteCartGood(_this.token, [], aDel, []).then(data => {
                _this.$toast('删除成功', () => {
                  _this.fetchCartCount(_this.token)
                  _this.fetchCartAll(_this.token)
                  _this.totalPrice = 0
                  _this.totalCount = 0
                  _this.isSubmitOrder = 'disabled'
                })
              })
            }
          })
        // 如果删除数组为空，则提示请勾选商品
        } else {
          this.$toast('请先勾选商品')
        }
      },
      // 购物车数量修改
      onChangeNum(gsp, good) {
        // 判断是否满足起订条件，不满足则提示
        gsp.goodsId = good.goodsId.toString()
        gsp.goodsNumType = good.goodsNumType
        gsp.goodsType = good.goodsType
        apiCartCount(this.token, {goodsCartList: [gsp]}).then(data => {
          this._calcuPriceByChangeGspNumber(good)
          this._calcuTotalCount()
          this._calcuTotalPrice()
          this.fetchCartCount(this.token)
        })
      },
      /**
       * 获取指定商品当前累加的总数量
       *
       * @param { Array } list 商品（sku列表）
       */
      getGoodsGspCount(list) {
        let count = 0
        list.forEach(v => {
          count += v.count
        })
        return count
      },

      // 购物车结算
      onBalanceStatus() {
        // 点击结算之前再次调用获取购物车接口，以防多个用户同时购买同一商品导致库存不足
        // this.fetchCartAll(this.token)
        let validateLowerCount = false
        // 对比勾选量和最低起订量
        // if (this.minCount > this.totalCount) {
        //   this.$toast(`此商品最低起订量${this.minCount}件`)
        //   return
        // }
        // 得到选中的规则数组
        let allGoodToGsp = []
        this.allCartData.storeGoodsCartList.forEach(store => {
          store.goodsCartList.forEach(good => {
            // 如果当前商品的总数量低于最低购买量
            if (good.goodsLimit > this.getGoodsGspCount(good.goodsGspList) && !validateLowerCount) {
              this.$toast(`${good.goodsName}的最低起订量是${good.goodsLimit}件`)
              validateLowerCount = true
              return
            }
            if (good.checkAllGsp.length) {
              allGoodToGsp = allGoodToGsp.concat(good.checkAllGsp)
            }
          })
        })
        // 如果校验失败，则直接抛出
        if (validateLowerCount) {
          this.$toast('不满足最低起订量')
          return
        }
        // 判断结算的时候sku价格是否超过库存，只针对现货，超过库存则不给结算
        let isMaxStore = false
        allGoodToGsp.forEach(gsp => {
          // 只有现货才做库存处理限制
          if (gsp.specpropertyInventCount != -1 && gsp.count > gsp.specpropertyInventCount) {
            isMaxStore = true
            gsp.maxstore = true
            gsp.count = gsp.specpropertyInventCount
            // 调用修改购物车数量接口
            const oGood = this._getGoodByGspId(gsp.goodsCartId)
            this.onChangeNum(gsp, oGood)
            setTimeout(() => {
              gsp.maxstore = false
            }, 1500)
          }
        })
        if (isMaxStore) {
          this.$toast('现货超出库存')
          return
        }
        // 提取得到的规格的id
        let aGsp = []
        allGoodToGsp.forEach(gsp => {
          aGsp.push(gsp.goodsCartId)
        })
        apiBalanceStatus(this.token, aGsp).then(data => {
          this.$router.push('/placeorder?origin=cart')
        })
      },
      // 全选切换
      emitCheckAll(bool) {
        if (bool) {
          this.allCartData.storeGoodsCartList.forEach(store => {
            store.checkStore = true
            store.goodsCartList.forEach(good => {
              good.checkGoods = true
              this._checkAllGspList(good)
            })
          })
          this.isSubmitOrder = 'main'
        } else {
          this.allCartData.storeGoodsCartList.forEach(store => {
            store.checkStore = false
            store.goodsCartList.forEach(good => {
              good.checkGoods = false
              this._unCheckAllGspList(good)
            })
          })
          this.isSubmitOrder = 'disabled'
        }
        this._calcuTotalCount()
        this._calcuTotalPrice()
      },
      // 点击store checkbox
      emitCheckStore(store) {
        if (store.checkStore) {
          store.goodsCartList.forEach(good => {
            good.checkGoods = true
            this._checkAllGspList(good)
            this._calcuPriceByChangeGspNumber(good)
          })
        } else {
          store.goodsCartList.forEach(good => {
            good.checkGoods = false
            this._unCheckAllGspList(good)
            this._calcuPriceByChangeGspNumber(good)
          })
        }
        const isStore = this.allCartData.storeGoodsCartList.some(store => {
          return store.checkStore
        })
        if (isStore) {
          this.isSubmitOrder = 'main'
        } else {
          this.isSubmitOrder = 'disabled'
        }
        this._setStoreToAllCheck()
        this._calcuTotalCount()
        this._calcuTotalPrice()
      },
      // 点击商品checkbox
      emitCheckGoodCart(store, good) {
        if (good.checkGoods) {
          this._checkAllGspList(good)
          this.isSubmitOrder = 'main'
        } else {
          good.checkAllGsp = []
          this.isSubmitOrder = 'disabled'
        }
        const allCheckShop = []
        this.allCartData.storeGoodsCartList.forEach(store => {
          store.goodsCartList.forEach(goods => {
            allCheckShop.push(goods.checkGoods)
          })
        })
        const isCheckShop = allCheckShop.some(bool => {
          return bool
        })
        if (isCheckShop) {
          this.isSubmitOrder = 'main'
        } else {
          this.isSubmitOrder = 'disabled'
        }
        this._setGoodToStoreCheck(store)
        this._setStoreToAllCheck()
        this._calcuPriceByChangeGspNumber(good)
        this._calcuTotalCount()
        this._calcuTotalPrice()
      },
      // 点击选择规格选择
      emitCheckGsp(store, good) {
        // 如果选中了商品，则高亮结算按钮，否则相反
        if (good.checkAllGsp.length) {
          this.isSubmitOrder = 'main'
        } else {
          this.isSubmitOrder = 'disabled'
        }
        if (good.goodsGspList.length === good.checkAllGsp.length) {
          good.checkGoods = true
          const goodLen = store.goodsCartList.length
          if (goodLen === 1) {
            store.checkStore = true
          } else {
            this._setGoodToStoreCheck(store)
          }
          this._setStoreToAllCheck()
        } else {
          good.checkGoods = false
          store.checkStore = false
          this.allCartData.checkAll = false
        }
        this._calcuPriceByChangeGspNumber(good)
        this._calcuTotalCount()
        this._calcuTotalPrice()
      },
      // 每次点击数量更改时，重新计算单价和金额
      _calcuPriceByChangeGspNumber(good) {
        good.curPriceIndex = this._getPriceIndexByGoodGspCount(good).index
        good.goodsGspList.forEach(gsp => {
          gsp.nowPrice = this._getPriceIndexByGoodGspCount(good).nowPrice
          gsp.price = (gsp.count * gsp.nowPrice).toFixed(2)
        })
      },
      // 第一次根据当前所有的商品数量计算当前数量区间的单价
      _getPriceIndexByGoodGspCount(good) {
        let totalCount = 0
        let aCount = []
        // 如果选中，则选中的数量计算
        if (good.checkAllGsp.length) {
          good.checkAllGsp.forEach(gsp => {
            totalCount += gsp.count
          })
        // 否则，按全部的计算
        } else {
          good.goodsGspList.forEach(gsp => {
            totalCount += gsp.count
          })
        }
        const tierdPrice = JSON.parse(good.tierdPrice)
        tierdPrice.forEach(item => {
          aCount.push(item.count)
        })
        const index = this._getIndexByTotalCount(totalCount, aCount)
        const nowPrice = tierdPrice[index].price || 0
        return {
          index,
          nowPrice
        }
      },
      // 根据传入的值判断值区间的索引
      _getIndexByTotalCount(total, arrCount) {
        const len = arrCount.length - 1
        let curIndex = 0
        arrCount.forEach((item, i) => {
          const aNum = item.indexOf('-') >= 1 ? item.split('-') : parseInt(item)
          if (aNum.length === 2) {
            if (total >= aNum[0] && (total <= aNum[1] || isNaN(Number(aNum[1])))) {
              curIndex = i
            } else if (total >= arrCount[len].split('-')[1]) {
              curIndex = len
            }
          } else {
            curIndex = len
          }
        })
        return curIndex
      },
      // 规则尺码全选
      _checkAllGspList(oGoodCart) {
        oGoodCart.checkAllGsp = []
        oGoodCart.goodsGspList.forEach(item => {
          oGoodCart.checkAllGsp.push(item)
        })
      },
      // 规则尺码取消全选
      _unCheckAllGspList(oGoodCart) {
        oGoodCart.checkAllGsp = []
      },
      // 判断选中商户的个数，是否和展示的长度相同，true相同，则选中全部，false全部取消
      _setStoreToAllCheck() {
        const storeList = this.allCartData.storeGoodsCartList
        let aStore = storeList.filter(item => {
          return item.checkStore === true
        })
        if (aStore.length === storeList.length) {
          this.allCartData.checkAll = true
        } else {
          this.allCartData.checkAll = false
        }
      },
      // 判断选中商品的个数，是否和展示的长度相同，true相同，则选中店铺，false取消选中店铺
      _setGoodToStoreCheck(store) {
        const goodList = store.goodsCartList
        let aGood = goodList.filter(item => {
          return item.checkGoods === true
        })
        if (aGood.length === goodList.length) {
          store.checkStore = true
        } else {
          store.checkStore = false
        }
      },
      // 计算总数
      _calcuTotalCount() {
        let count = 0
        this.allCartData.storeGoodsCartList.forEach(store => {
          store.goodsCartList.forEach(good => {
            good.checkAllGsp.forEach(item => {
              count += item.count
            })
          })
        })
        this.totalCount = count
      },
      // 计算总额
      _calcuTotalPrice() {
        let price = 0
        this.allCartData.storeGoodsCartList.forEach(store => {
          store.goodsCartList.forEach(good => {
            good.checkAllGsp.forEach(item => {
              price += item.nowPrice * item.count
            })
          })
        })
        this.totalPrice = price
      },
      /**
       * 联系店家
       */
      // onContactShop(storeId) {
      //   const _this = this
      //   this.$store.dispatch('fetchUserRole', {
      //     token: this.$store.getters.token,
      //     callback(role) {
      //       if (role != 2) {
      //         _this.$toast('您不是采购商，只有采购商才可以使用聊天功能')
      //       } else {
      //         _this.$store.dispatch('fetchCustomerByStoreId', {
      //           mobile: _this.$store.getters.mobile,
      //           storeId: storeId
      //         })
      //       }
      //     }
      //   })
      // },
      // 根据goodsCartId获取对应的good对象
      _getGoodByGspId(gspId) {
        let oTarget = null
        this.allCartData.storeGoodsCartList.forEach(store => {
          store.goodsCartList.forEach(good => {
            good.goodsGspList.forEach(gsp => {
              if (gsp.goodsCartId == gspId) {
                oTarget = good
              }
            })
          })
        })
        return oTarget
      }
    },
    filters: {
      sizeColorSplit(val) {
        return val.split(':')[1]
      }
    }
  }
</script>

<style lang="scss">
.cart-wrap {
  .m-bread-hd {
    border-bottom: none!important;
  }
}
</style>
<style lang="scss" scoped>
  @import '../scss/_var.scss';
  .cart-caption {
    padding: 14px 0 14px 50px;
  }
  .cart-wrap {
    background-color: #fff;
    padding-bottom: 30px;
  }
  .text-m {
    color: $color-main;
    font-size: 18px;
    padding: 0 20px 20px;
    border-bottom: 2px solid $color-main;
  }
  .section {
    margin-bottom: 20px;
    background: #fff;
    .hd {
      padding: 30px 0 20px 15px;
      .name {
        margin-left: 12px;
        font-size: 15px;
      }
      .main {
        width: 110px;
        height: 30px;
        margin-left: 70px;
        border-radius: 3px;
      }
    }
    .bd {
      border: 2px solid $bg-gray;
      background-color: #fcfcfc;
      padding: 25px;
    }
    .checked {
      background-color: #fffaf5
    }
    .goods {
      .avatar {
        display: inline-block;
        width: 80px;
        height: 80px;
        margin-left: 12px;
        vertical-align: top;
      }
      .tit {
        display: inline-block;
        width: 178px;
        line-height: 22px;
        margin-left: 4px;
        word-break: break-all;
        vertical-align: top;
        .goods-type{
          color:$color-white;
          background: $color-main;
          padding:2px 5px;
        }
      }
    }
    .num {
      margin-left: 46px;
      ul {
        padding-bottom: 24px;
      }
      li {
        position: relative;
        margin-bottom: 10px;
        &:last-of-type {
          margin-bottom: 0;
        }
        .rule {
          display: inline-block;
          margin-top: 6px;
          color: $color-gray;
          width: 132px;

          .empty-str {
            display: inline-block;
            width: 36px;
          }
        }
        .cart-input {
          display: inline-block;
          vertical-align: -webkit-baseline-middle;
        }
        .color {
          // display: inline-block;
          width: 60px;
          overflow: hidden;
          text-align: left;
          white-space: nowrap;
        }
        .input-number {
          vertical-align: top;
        }
        // .m-checkbox {
        //   margin: 0 12px;
        // }
        strong {
          display: inline-block;
          width: 26px;
          margin-right: 5px;
          font-weight: 600;
          overflow: hidden;
        }
        .max-error {
          position: absolute;
          left: 266px;
          top: 6px;
          width: 100px;
          font-size: 12px;
          color: $color-error;
        }
      }
    }
    .price {
      width: 160px;
      margin-top: 8px;
      margin-left: 82px;
      text-align: center;
      overflow: hidden;
      p {
        text-decoration: line-through;
        color: $color-gray;
        font-size: 12px;
        line-height: 20px;
      }
      .cur {
        text-decoration: none;
        color: $color-black;
        font-size: 14px;
        font-weight: bold
      }
    }
    .money {
      width: 150px;
      margin-left: 26px;
      text-align: center;
      p {
        line-height: 28px;
        margin-bottom: 10px;
        color: $color-main;
        &:last-of-type {
          margin-bottom: 0;
        }
      }
    }
    .opreate {
      margin-top: 8px;
      margin-left: 60px;
      font-size: 14px;
      width: 50px;
      .opreate-btn {
        width: 50px;
        margin-bottom: 10px;
        display: inline-block;
        cursor: pointer
      }
      i {
        display: block;
        width: 30px;
        height: 30px;
        margin-bottom: 26px;
        cursor: pointer;
        background-image: url('../assets/ico_cart_group.png');
      }
      .ico-collect {
        background-position: 0 0;
        &:hover, &.selected {
          background-position: -30px 0;
        }
      }
      .ico-del {
        background-position: 0 -30px;
        &:hover {
          background-position: -30px -30px;
        }
      }
    }
  }

  .cart-foot {
    margin-top: 30px;
    background: #e5e5e5;
    font-size: 14px;
    .cart-p {
      width: 1070px;
     line-height: 60px;
    }
    .check-all {
      display: inline-block;
      line-height: 18px;
      margin-left: 26px;
    }
    span {
      line-height: 38px;
    }
    .del {
      margin-left: 40px;
      cursor: pointer;
      &:hover {
        color: #f00384;
      }
    }
    .txt-count {
      color: $color-main;
      font-size: 24px;
      font-weight: bold;
    }
    .count {
      margin-right: 36px;
    }
    .btn {
      width: 150px;
      font-size: 24px;
      height: 60px;
      color: #fff;
      background-color: #b0b0b0;

      &.main {
        background-color: #f00384;
      }
    }
  }

  .m-null-data {
    height: 324px;
    margin-top: 60px;
    background: url(../assets/nullIcon/icon_cartNull.png) no-repeat center center;
  }
</style>